<template>
  <div class="azm-product-graphic">
    <font class="viewTit" v-if="viewTit">（此编辑器仅适用移动端，chrome请按F12模拟手机设备进行浏览）</font>
    <div id="contentEditor" v-html="productData.intro"></div>
    <div class="azm-footer azm-append-footer-fixed van-hairline--top">
      <mu-flex justify-content="end">
        <mu-button flat textColor="#ff4919" small
                   @click.native="$router.back">
          取消
        </mu-button>
        <mu-button flat textColor="#fff" small class="azm-shelf-btn"
                   @click.native="onConfirm">
          确认
        </mu-button>
      </mu-flex>
    </div>
  </div>
</template>

<script>
  import config from '../../libs/config'
  import Eleditor from '../../libs/Eleditor/index'
  import { mapState } from 'vuex'
  export default {
    components: {},
    data(){
      return {
        message: '',
        viewTit: false,
        contentEditor: null
      }
    },
    computed: {
      ...mapState({
        $location: state => state.vux.$location,
        productData: state => state.product.productData
      })
    },
    filters: {},
    created(){
      let that = this, $ = that.$azm.Zepto;
      if (this.$device.isAndroid || this.$device.isIpad || this.$device.isIphone || $(window).width() < 500) {
        this.viewTit = false
      } else {
        this.viewTit = true
      }
      this.$nextTick(function () {
        this.contentEditor = new Eleditor({
          el: '#contentEditor',
          upload: {
            server: `${config.host}/services/uploader/uploadImgWeb`,
            headers: {},
            formName: '_file_',
            accept: {//accept一般不用设置
              title: 'Images',
              extensions: 'gif,jpg,jpeg,bmp,png,webp',
              mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,image/webp'
            },
            compress: true,
            fileSizeLimit: 5,//限制文件上传大小为2M
          },
          /*初始化完成钩子*/
          mounted: function () {

          },
          changer: function (e) {
            console.log('文档修改', arguments);
          },
          /*自定义按钮的例子*/
//        insertText /*插文字'*/
//        insertImage /*插图片'*/
//        insertLink  /*链接'*/
//        insertHr  /*水平线'*/
//        editText  /*文字'*/
//            delete /*删除'*/
//                undo  /*撤销'*/
//        cancel  /*取消'*/
          toolbars: [
            'insertText',
            'editText',
            'insertImage',
//            'insertLink',
            'insertHr',
            'delete',
//            //自定义一个视频按钮
//            {
//                id: 'insertVideo',
//                // tag: 'p,img', //指定P标签操作，可不填
//                name: '插入视频',
//                handle: function (select, controll) {//回调返回选择的dom对象和控制按钮对象
//
//                    /*因为上传要提前绑定按钮到webuploader，所以这里不做上传逻辑，写在mounted*/
//
//                    /*!!!!!!返回false编辑面板不会关掉*/
//                    return false;
//                }
//            },
            'undo',
            'cancel'
          ],
//        placeHolder: 'placeHolder设置占位符'
        });
      })
    },
    methods: {
      onConfirm(){
        if (this.contentEditor) {
          this.productData.intro = this.contentEditor.getContent()
          this.$router.back()
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .azm-product-graphic {
    .viewTit {
      color: #FF5722;
      position: fixed;
      top: 0;
      left: 0;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      text-align: center;
      display: block;
      width: 100%;
      background: #FFEB3B;
      box-shadow: 0 0 5px;
    }

    .dempTip {
      border-left: 2px solid #00BCD4;
      padding-left: 5px;
      margin: 10px;
      font-size: 16px;
    }

    code {
      white-space: pre-wrap;
      background: #2D2D2D;
      display: block;
      margin: 10px;
      border-radius: 5px;
      color: #fff;
    }
    .azm-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 12px 15px;
      background-color: #fff;
      .mu-button {
        margin-left: 5px;
        min-width: 75px;
        border: 1px solid #ff4919;
        font-size: 12px;
        &.azm-shelf-btn {
          background-color: #ff4919;
        }
      }
    }
  }
</style>
<style lang="less">
  .azm-product-graphic {
    #contentEditor {
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      margin-bottom: 50px;
      color: #444;
      p {
        letter-spacing: 0.25px;
        font: 16px/25px Tahoma, Verdana, "宋体";
        padding: 10px 0;
      }
      h4 {
        font-weight: bold;
        line-height: 1.333em;
        margin: 10px 0 20px;
        padding: 25px 0 0;
      }
      img {
        width: 100%;
        height: auto;
        box-sizing: border-box;
      }
    }

    .Eleditor-wrap {
      .Eleditor-textEditor {
        height: 70%;
        top: auto;
        bottom: 0;
      }
    }

    /**
  * Title: Eleditor 移动端富文本编辑器
  * Site: https://eleditor.fixel.cn
  * Author: Try
  */
    .Eleditor-scrollLocked {
      height: 100%;
      overflow: hidden
    }

    .Eleditor-wrap.Eleditor-mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5)
    }

    .Eleditor-loading {
      display: none;
      position: absolute;
      padding: 15px;
      background: rgba(255, 255, 255, .9);
      z-index: 999;
      width: 100%;
      height: 100%
    }

    .Eleditor-loading p {
      font-size: 12px;
      color: #666;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%)
    }

    .Eleditor-loading p:before {
      content: '';
      width: 25px;
      height: 25px;
      margin: 0 auto;
      background: url() no-repeat center top;
      background-size: 100%;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px
    }

    .Eleditor-wrap ul {
      list-style: none
    }

    .Eleditor-area, .Eleditor-area *, .Eleditor-wrap, .Eleditor-wrap * {
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .Eleditor-area .Eleditor-active {
      background: #cce0f2 !important;
      padding: 2% !important
    }

    .Eleditor-video-area video {
      width: 100%;
    }

    .Eleditor-iframe-area, .Eleditor-video-area, .Eleditor-audio-area {
      position: relative;
      width: 100%;
      box-sizing: border-box
    }

    .Eleditor-iframe-area iframe {
      width: 100%
    }

    .Eleditor-iframe-area:before, .Eleditor-video-area:before, .Eleditor-audio-area:before {
      position: absolute;
      content: '';
      width: 100%;
      opacity: 0;
      height: 100%;
      top: 0;
      left: 0;
      display: block;
      z-index: 1
    }

    .Eleditor-controller {
      background: #fff;
      position: absolute;
      box-sizing: border-box;
      transform: translate(-50%, 0);
      -webkit-transform: translate(-50%, 0);
      left: 50%;
      display: none;
      margin-top: 5px;
      box-shadow: 0 0 20px rgba(0, 0, 0, .2);
      -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
      border-bottom: 1px solid #e1e1e1;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      background: linear-gradient(top, rgb(255, 255, 255) 29%, rgb(248, 248, 248) 74%);
      background: -o-linear-gradient(top, rgb(255, 255, 255) 29%, rgb(248, 248, 248) 74%);
      background: -moz-linear-gradient(top, rgb(255, 255, 255) 29%, rgb(248, 248, 248) 74%);
      background: -webkit-linear-gradient(top, rgb(255, 255, 255) 29%, rgb(248, 248, 248) 74%)
    }

    .Eleditor-controller ul {
      margin-bottom: 2.5%
    }

    .Eleditor-controller ul:after {
      content: '';
      display: block;
      height: 0;
      clear: both
    }

    .Eleditor-controller ul li {
      float: left;
      display: inline-block;
      width: 30%;
      margin: 2% 0 0 2.5%;
      height: 42px;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      line-height: 42px;
      padding-left: 10%;
      box-sizing: border-box;
      font-size: 14px;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      white-space: nowrap;
      position: relative
    }

    .Eleditor-controller ul li.Eleditor-undo {
      display: none
    }

    .Eleditor-controller ul li:before {
      background-size: 100%;
      background-repeat: no-repeat
    }

    .Eleditor-controller ul li:before {
      content: '';
      position: absolute;
      left: 8px;
      top: 12px;
      width: 15px;
      height: 15px;
      display: block;
      background-image: url()
    }

    .Eleditor-controller ul li.Eleditor-insertText:before {
      background-image: url()
    }

    .Eleditor-controller ul li.Eleditor-insertImage:before {
      background-image: url()
    }

    .Eleditor-controller ul li.Eleditor-undo:before {
      background-image: url()
    }

    .Eleditor-controller ul li div[id^='rt_rt_'] {
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      opacity: 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .Eleditor-controller ul li.Eleditor-insertLink:before {
      background-image: url()
    }

    .Eleditor-controller ul li.Eleditor-insertHr:before {
      background-image: url()
    }

    .Eleditor-controller ul li.Eleditor-delete:before {
      background-image: url()
    }

    .Eleditor-controller ul li.Eleditor-cancel:before {
      background-image: url()
    }

    .Eleditor-controller ul li.Eleditor-editText:before {
      background-image: url()
    }

    @media screen and (max-width: 300px) {
      .Eleditor-controller ul li {
        width: 30%;
        text-align: center;
        padding-left: 0;
        font-size: 12px
      }

      .Eleditor-controller ul li:before {
        display: none
      }
    }

    .Eleditor-textEditor {
      display: none;
      width: 100%;
      height: 100%;
      background: #fff;
      position: fixed;
      left: 0;
      top: 0
    }

    .Eleditor-textEditor-colors, .Eleditor-textEditor-fontsizes, .Eleditor-textEditor-lineheight, .Eleditor-textEditor-linedecorations {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: 1
    }

    .Eleditor-textEditor-modulePane {
      margin: 10px 8px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px
    }

    .Eleditor-textEditor-linedecorations .Eleditor-textEditor-modulePane {
      margin-bottom: 0
    }

    .Eleditor-textEditor-linedecorations ul li {
      text-align: center;
      display: block;
      color: #555;
      font-size: 14px;
      letter-spacing: 2px;
      padding: 20px 0;
      border-bottom: 1px solid #eee
    }

    .Eleditor-textEditor-colors ul:after {
      content: '';
      display: block;
      clear: both;
      height: 0
    }

    .Eleditor-textEditor-colors ul li {
      float: left;
      text-align: center;
      width: 20%;
      margin-bottom: 10px
    }

    .Eleditor-textEditor-colors ul li span {
      width: 40px;
      height: 40px;
      display: inline-block;
      border-radius: 3px;
      cursor: pointer;
      position: relative
    }

    .Eleditor-textEditor-colors ul li span.transparent:after, .Eleditor-textEditor-colors ul li span.transparent:before {
      position: absolute;
      background: #dedede;
      content: '';
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg)
    }

    .Eleditor-textEditor-colors ul li span.transparent:after {
      width: 1px;
      height: 100%;
      left: 50%;
      top: 0
    }

    .Eleditor-textEditor-colors ul li span.transparent:before {
      width: 100%;
      height: 1px;
      left: 0;
      top: 50%
    }

    .Eleditor-textEditor-fontsizes ul li, .Eleditor-textEditor-lineheight ul li {
      text-align: center;
      color: #333;
      font-size: 14px;
      line-height: 30px
    }

    .Eleditor-textStyle {
      display: flex;
      display: -webkit-flex;
      position: relative;
      border-bottom: 1px solid #eee;
      overflow-x: auto;
      overflow-y: hidden;
      box-shadow: 0 0 10px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1)
    }

    .Eleditor-textStyle .Eleditor-textStyle-item {
      flex: 1;
      -webkit-flex: 1;
      padding: 10px 0
    }

    .Eleditor-textStyle .Eleditor-textStyle-item div {
      width: 24px;
      height: 24px;
      position: relative;
      margin: auto
    }

    .Eleditor-textStyle .Eleditor-textStyle-item div:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block;
      background-size: 20px;
      background-position: center;
      background-repeat: no-repeat
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-active {
      background-color: #FFE69F !important;
      padding: 0;
      border: 1px solid #DCAC6C;
      border-radius: 2px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-bold:before {
      background-image: url()
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-color:before {
      background-image: url();
      background-size: 16px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-color:before {
      background-position: center 3px;
      background-size: 15px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-color span {
      display: block;
      width: 18px;
      height: 1px;
      background: #333;
      position: absolute;
      bottom: 2px;
      left: 4px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-linedecoration:before {
      background-image: url();
      background-size: 18px;
      background-position: center 3px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-bgColor:before {
      background-image: url();
      background-position: center 3px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-fontSize:before {
      background-image: url();
      background-size: 22px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-lineHeight:before {
      background-image: url()
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-alignLeft:before {
      background-image: url();
      background-size: 25px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-alignCenter:before {
      background-image: url();
      background-size: 25px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-alignRight:before {
      background-image: url();
      background-size: 25px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item .Eleditor-textStyle-upImg:before {
      background-image: url();
      background-size: 22px
    }

    .Eleditor-textStyle .Eleditor-textStyle-item-upImg {
      position: relative
    }

    .Eleditor-textStyle .Eleditor-textStyle-item-upImg-disabled {
      display: none
    }

    .Eleditor-textStyle .Eleditor-webUploader-btn > :not(.webuploader-pick) {
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      top: 50% !important;
      left: 50% !important;
      opacity: 0
    }

    .Eleditor-textStyle .Eleditor-webUploader-btn > :not(.webuploader-pick) label {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%
    }

    .Eleditor-textEditor-formats {
      position: absolute;
      right: -60px;
      bottom: 20%;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      width: 100px;
      height: 100px;
      box-shadow: 0 0 5px rgba(0, 0, 0, .1);
      background: #fff;
      z-index: 1
    }

    .Eleditor-textEditor-formats div {
      background-repeat: no-repeat;
      width: 100%;
      height: 32px;
      background-position-x: 12px;
      background-position-y: center;
      position: absolute
    }

    .Eleditor-textEditor-formats .Eleditor-textEditor-format {
      background-image: url();
      background-size: 20px;
      border-bottom: 1px solid #F5F5F5;
      top: 15px
    }

    .Eleditor-textEditor-formats .Eleditor-textEditor-clean {
      background-image: url();
      background-size: 20px;
      bottom: 15px
    }

    .Eleditor-inputarea {
      position: absolute;
      top: 45px;
      bottom: 40px;
      width: 100%
    }

    .Eleditor-textEditor[type=link] .Eleditor-inputarea {
      bottom: 95px
    }

    .Eleditor-inputarea .textarea {
      -webkit-user-select: auto;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      font-size: 14px;
      color: #555;
      border: none;
      word-wrap: break-word;
      word-break: normal
    }

    .Eleditor-inputarea .textarea:empty::before {
      color: lightgrey;
      content: attr(placeholder)
    }

    .Eleditor-inputarea input {
      display: none
    }

    .Eleditor-inputarea .textarea img {
      width: 100%;
      height: auto;
      box-sizing: border-box
    }

    .Eleditor-textEditor[type=link] .Eleditor-inputarea input {
      height: 33px;
      display: block;
      border: none;
      border-bottom: 1px solid #ddd;
      width: 100%;
      margin: 10px;
      color: #333;
      outline: none
    }

    .Eleditor-method {
      border-top: 1px solid #eee;
      position: absolute;
      bottom: 0;
      width: 100%;
      box-shadow: 0 0 10px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1)
    }

    .Eleditor-method:after {
      content: '';
      clear: both;
      display: block;
      height: 0
    }

    .Eleditor-method button {
      width: 50%;
      border: none;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      float: left;
      background: #fff;
      height: 40px;
      color: #333
    }

    .Eleditor-method .Eleditor-commit {
      border-right: 1px solid #ddd
    }

    .Eleditor-placeholder {
      color: #999
    }

    .Eleditor-deleteMode * {
      border: 1px dashed red;
      text-decoration: none !important
    }

    .Eleditor-deleteMode *:empty {
      padding: 0 10px;
      box-sizing: border-box
    }

    .Eleditor-delete-layer {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #fff;
      border-top: 1px solid #ddd
    }

    .Eleditor-delete-tip {
      position: fixed;
      top: 0;
      width: 100%;
      text-align: center;
      line-height: 28px;
      font-size: 12px;
      background: rgba(255, 235, 59, .95);
      color: #F44336;
      border-bottom: 1px solid #ffd350
    }

    .Eleditor-delete-back {
      padding: 15px;
      box-sizing: border-box;
      width: 100%;
      text-align: center;
      font-size: 14px
    }

    .Eleditor-delete-back:before {
      content: '';
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: 20% center;
      display: inline-block;
      vertical-align: bottom;
      width: 16px;
      height: 16px;
      margin-right: 5px
    }

    .Eleditor-delete-revoke, .Eleditor-delete-clear {
      position: fixed;
      width: 50px;
      height: 50px;
      right: 20px;
      font-size: 12px;
      border-radius: 50%;
      box-shadow: 0 0 15px rgba(0, 0, 0, .2);
      -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .2);
      background: #FF5722
    }

    .Eleditor-delete-revoke {
      bottom: 70px;
      background-image: linear-gradient(to bottom, #ff5165, #ff8f8f);
      background-image: -webkit-linear-gradient(to bottom, #ff5165, #ff8f8f)
    }

    .Eleditor-delete-revoke-disabled {
      display: none
    }

    .Eleditor-delete-clear {
      bottom: 130px;
      background-image: linear-gradient(to bottom, #9E9E9E, #d6d6d6);
      background-image: -webkit-linear-gradient(to bottom, #9E9E9E, #d6d6d6)
    }

    .Eleditor-delete-revoke:before, .Eleditor-delete-clear:before {
      position: absolute;
      left: 50%;
      top: 50%;
      content: '';
      background-size: 100%;
      display: block;
      background-repeat: no-repeat
    }

    .Eleditor-delete-revoke:before {
      background-image: url();
      margin-left: -15px;
      margin-top: -13px;
      width: 28px;
      height: 28px
    }

    .Eleditor-delete-clear:before {
      background-image: url();
      margin-left: -12px;
      margin-top: -12px;
      width: 24px;
      height: 24px
    }

    .Eleditor-delete-back:before {
      background-image: url()
    }
  }
</style>
